<template>
  <div class="event">
    <div class="hd">我是赛事</div>
    
     <virtual-list
      class="ct"
      :data-sources="eventList"
      :data-component="itemComponent"
      data-key="id"
      @tobottom="reachEnd"
      >
      <div slot="footer" class="loading-spinner"> {{ endText  }}</div>
      </virtual-list>


    <div class="ft">我是底部导航</div>
  </div>
</template>

<script>
import EventApi from '@/api/event.js';
import VirtualList from 'vue-virtual-scroll-list';
import EventItem from './EventItem.vue'
import { Toast } from 'vant';

  export default {
    components: { 'virtual-list': VirtualList },
    data(){
      return {
        eventList:[],
        itemComponent: EventItem,
        page:1,
        total:0,
        endText:'加载中...',
        isLoading: false
      }
    },
    created(){
      this.getList()
    },
    methods:{
      async getList ()   {
        if(this.isLoading){
          Toast('正在加载中，请稍后')
          return false
        }
        this.isLoading = true
        const res = await EventApi.getEventList({ $limit: 20,$page: this.page  });
        this.isLoading = false
        this.eventList = [...this.eventList,...res.data.data];
        this.total = res.data.total;
      },
      reachEnd(){
        if(this.isLoading){
          Toast('正在加载中，请稍后')
          return false
        }
        // 如果当前列表的长度已经跟总数一样了，就不再请求了
        if(this.eventList.length >= this.total){
          this.endText = '已经没有更多的内容了'
          return false
        }
        this.page++
        this.getList();
        console.log('到底了')
      }
  }
}
</script>


<style scoped lang="scss">
.event {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.hd {
  height: 50px;
  border-bottom: 1px solid red;
}

.ft {
  height: 50px;
  border-top: 1px solid red;
}
.ct {
  height: 0;
  flex-grow: 1;
  overflow-y: auto;
}
.box {
  line-height: 55px;
  border-bottom: 1px solid #ccc;
}
</style>
